<html>
<head>
    <title>SIMILE | Exhibit | Boston Red Sox vs. New York Yankees</title>
    
    <link href="data.json" type="application/json" rel="exhibit/data" />
    
    <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"></script>

    <!-- timeplot extension -->
    <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/timeplot/timeplot-extension.js?bundle=false"></script>

    <script type="text/javascript">
    var timeGeometer = function(grid) {
        return new Timeplot.DefaultTimeGeometry({
            gridColor: grid,
            axisLabelsPlacement: "top"
        });
    };

    var valueGeometer = function(grid) {
        return new Timeplot.DefaultValueGeometry({
            gridColor: grid,
            axisLabelsPlacement: "left",
            gridType: "short",
            min: 0.225,
            max: 0.775
        });
    };
    </script>

    <style>
        body {
            margin:         0px;
            padding:        0px;
            font-family:    "georgia", "times", "times new roman", serif;
            font-size:      8pt;
        }
	table {
	    border: 0;
	    border-collapse: collapse;
	}
	td {
	    font-size: 10pt;
	}
	.exhibit-facet-body { background: #fff; }
	#subject-colors { display: none; }
        a { color: #555555; }
    </style>
</head>

<body>
    <div ex:role="exhibit-collection" ex:itemTypes="Season"></div>
    <div ex:role="coder" ex:coderClass="Color" id="subject-colors">
        <span ex:color="#DD2233">Red Sox</span>
        <span ex:color="#000000">Yankees</span>
    </div>
    <table width="100%" cellpadding="20"><tr valign="top">
        <td width="20%" style="background: #fff url(wood.png);">
            <p><img src="bos.png" alt="Boston Red Sox" style="width: 80px; height: 79px;" /> vs. <img src="nyy.png" alt="New York Yankees" style="width: 80px; height: 79px;" /></p>
	    <p>Statistics of seasonal winning percentage records of the <a href="http://en.wikipedia.org/wiki/List_of_Boston_Red_Sox_seasons">Boston Red Sox</a> and the <a href="http://en.wikipedia.org/wiki/New_York_Yankees_seasons">New York Yankees</a> since the first World Series of 1903.</p>
            <div ex:role="facet" ex:expression=".year" ex:facetLabel="Year" ex:height="8em" ex:facetClass="NumericRange" ex:interval="10"></div>
            <div ex:role="facet" ex:expression=".year.strike" ex:facetLabel="Strike Season" ex:height="3.5em"></div>
            <div ex:role="facet" ex:expression=".subject" ex:facetLabel="Team" ex:height="3.5em"></div>
            <div ex:role="facet" ex:expression=".wonWorldSeries" ex:facetLabel="World Series Winner" ex:height="3.5em"></div>
            <center ex:role="logo" ex:color="Red"></center>
        </td>
        <td style="background: url(fenway.jpg) bottom left no-repeat;">
            <div ex:role="view"
                ex:viewClass="Timeplot"
                ex:label="Winning Percentage"
                ex:seriesConnector=".subject"
                ex:time=".year"
                ex:value=".winningPercentage"
                ex:timeplotHeight="300"
                ex:gridColor="#666666"
                ex:timeGeometry="timeGeometer"
                ex:valueGeometry="valueGeometer"
		ex:colorKey=".subject"
		ex:colorCoder="subject-colors"
                >
                </div>
        </td>
    </tr></table>


</body>
</html>
